<template>
    <transition name="move">
        <div class="mineInfo" v-show="mineInfoFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <div class="mineInfo-title">
                <div class="left">
                    <span class="text">头像</span>
                </div>
                <div class="right">
                    <img class="minInfoImg" :src="memberinfo.pic" alt="" />
                </div>
            </div>
            <div class="mine-info-name">
                <span class="text">名字</span>
                <span class="name">{{memberinfo.nickname}}</span>
            </div>
            <div class="mine-info-name">
                <span class="text">手机号</span>
                <span class="name">{{memberinfo.phone}}</span>
            </div>
            <div class="mine-info-name" @click="handleClickSex">
                <span class="text">性别</span>
                <span class="name" v-text="memberinfo.sex==='1'?'男':'女'"></span>
                <i class="mine-more"></i>
            </div>
            <div class="mine-info-name" @click="handleClickAddress">
                <span class="text">地区</span>
                <span class="name">{{memberinfo.area}}</span>
                <i class="mine-more"></i>
            </div>
            <!-- 选择性别 -->
            <van-actionsheet v-model="mskShowSex" :actions="actions" cancel-text="取消" />
            <!-- 弹出层 -->
            <van-popup v-model="mskShow" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columns"
                  @confirm="selectVal"
                  @cancel="mskShow = false"
                  @change="onChange"
                />
            </van-popup>
        </div>
    </transition>
</template>

<script>
    import Vue from 'vue'
	import axios from 'axios'
    import MTitle from 'base/title/title'

    // 湖北省城市数据
    const citys = {
        '武汉市': ['江岸区', '江汉区', '硚口区', '汉阳区', '武昌区','青山区','洪山区','东西湖区','汉南区','蔡甸区','江夏区','黄陂区','新洲区','武汉经济技术开发区'],
        '黄石市': ['黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县','大冶市','黄石经济技术开发区'],
        '十堰市': ['茅箭区', '张湾区', '郧阳区', '郧西县', '竹山县','竹溪县','房县','丹江口市'],
        '宜昌市': ['西陵区', '伍家岗区', '点军区', '猇亭区', '夷陵区','远安县','兴山县','秭归县','长阳土家族自治县','五峰土家族自治县','宜都市','当阳市','枝江市','经济开发区'],
        '襄阳市': ['襄城区', '樊城区', '襄州区', '南漳县', '谷城县','保康县','老河口市','枣阳市','宜城市'],
        '鄂州市': ['梁子湖区', '华容区', '鄂城区'],
        '荆门市': ['东宝区', '掇刀区', '京山县', '沙洋县', '钟祥市'],
        '孝感市': ['孝南区', '孝昌县', '大悟县', '云梦县', '应城市','安陆市','汉川市'],
        '荆州市': ['沙市区', '荆州区', '公安县', '监利县', '江陵县','石首市','洪湖市','松滋市'],
        '黄冈市': ['黄州区', '团风县', '红安县', '罗田县', '英山县','浠水县','蕲春县','黄梅县','麻城市','武穴市'],
        '咸宁市': ['咸安区', '嘉鱼县', '通城县', '崇阳县', '通山县','赤壁市'],
        '随州市': ['曾都区', '随县', '广水市', '罗田县', '英山县','浠水县','蕲春县','黄梅县','麻城市','武穴市'],
        '恩施土家族苗族自治州': ['恩施市', '利川市', '建始县', '巴东县', '宣恩县','咸丰县','来凤县','鹤峰县'],
        '省直辖县': ['仙桃市', '潜江市', '天门市', '神农架林区']
    }
    export default {
		props:{
			memberinfo: {
			type:Object
			}
		},
        data () {
            return {
                title: '个人信息',
                mineInfoFlag: false,
                returnShow: true,
                sex: '女',
                address: '武汉市洪山区',
                mskShow: false,
                mskShowSex: false,
                columns: [
                    {
                      values: Object.keys(citys),
                      className: 'column1'
                    },
                    {
                      values: citys['武汉市'],
                      className: 'column2',
                      defaultIndex: 0
                    }
                ],
                actions: [
                    {
                        name: '男',
                        callback: this.handleBoyClick
                    },
                    {
                        name: '女',
                        callback: this.handleGrilClick
                    }
                ]
            }
        },
        methods: {
            // 修改性别
            handleClickSex () {
                this.mskShowSex = !this.mskShowSex
            },
            handleBoyClick(picker, value) {
                const sixArr = ["不男不女","男","女"]
                if (picker.name === sixArr[this.memberinfo.sex]) {
                    this.mskShowSex = false
                    return
                } else {
                    Vue.set(this.memberinfo,"sex","1")
                    this.mskShowSex = false
                    this.refreshinfo("sex",this.memberinfo.sex)
                }
            },
            handleGrilClick (picker, value) {
                const sixArr = ["不男不女","男","女"]
                if (picker.name === sixArr[this.memberinfo.sex]) {
                    this.mskShowSex = false
                    return
                } else {
                    Vue.set(this.memberinfo,"sex","2")
                    this.mskShowSex = false
                    this.refreshinfo("sex",this.memberinfo.sex)
                }
            },
            // 修改地区
            handleClickAddress () {
                this.mskShow = true
            },
            selectVal (value, index) {
                this.memberinfo.area = value[0] + value[1]
                this.mskShow = false
				this.refreshinfo("area",this.memberinfo.area);
            },
            onChange (picker, values) {
                picker.setColumnValues(1, citys[values[0]]);
            },
            show () {
                this.mineInfoFlag = true
            },
            hide () {
                this.mineInfoFlag = false
            },
			refreshinfo(fieldname,fieldvalue){
				axios.post('/api/index.php?g=Api&m=Ucenter&a=moduserinfo', {
					openid: localStorage.getItem("openid"),
					mid: localStorage.getItem("memberid"),
					fieldname:fieldname,
					fieldvalue:fieldvalue
				}).then((res) => {

				}).catch(function (error) {
					console.log(error)
				})
			}
        },
        components: {MTitle}
    }
</script>

<style lang="stylus" scoped>
    .mineInfo
        position: fixed
        top: 0
        left: 0
        z-index: 99
        width: 100%
        height: 100%
        overflow: hidden
        background: #f0eff5
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .mineInfo-title
            width: 100%
            height: 79px
            background: #fff
            padding: 0 15px
            box-sizing: border-box
            display: flex
            align-items: center
            overflow: hidden
            margin-top: 10px
            border-bottom: 1px solid #eee
            .left
                flex: 1
                .text
                    text-align: left
                    font-size: 16px
            .right
                width: 60px
                height: 60px
                flex: 0 0 60px
                .minInfoImg
                    width: 60px
                    height: 60px
                    border-radius: 50%
        .mine-info-name
            height: 40px
            border-bottom: 1px solid #eee
            width: 100%
            display: flex
            padding: 0 15px
            align-items: center
            box-sizing: border-box
            background: #fff
            .text
                font-size: 16px
                flex: 0 0 50px
                width: 50px
            .name
                flex: 1
                text-align: right
                color: #888
            .mine-more
                width: 20px
                height: 20px
                background: url('./mine-more.png') no-repeat
                background-size: 100% 100%
                flex: 0 0 20px
            
</style>